<template>
	<div class="decorate-cardList"
    :style="tplItemData.modulePadding || tplItemData.modulePadding ==0?'padding-top:'+tplItemData.modulePadding+'px;padding-bottom:'+tplItemData.modulePadding+'px;':'padding-top:5px;padding-bottom:5px;'">
    <div class="cardList-layout cardList-layout3" v-if="tplItemData.tabstyle == 3">
      <div class="cardList-tab cardList-tab3">
        <div class="goods-nav" v-for="(goods,index) in tplItemData.goodslist" :key="index" @click="showGoodsList(goods.goods, index)">
          <div class="tabtitle" :style="index == tabIndex ? {'color':tplItemData.titleBackgroundColor ? tplItemData.titleBackgroundColor : '#00c257'}: {}">{{goods.tabtitle}}</div>
          <span class="subtitle" v-if="goods.subTabTitle" :style="index == tabIndex ? {'color':'#fff','background': tplItemData.titleBackgroundColor}: {}">{{goods.subTabTitle}}</span>
        </div>
      </div>
      <template v-for="(goods,index) in tplItemData.goodslist">
        <first-layout v-if="tabIndex == index" :key="index" :tplItemData="goods.goods" :tabData="tplItemData" :magazineType="tplItemData.magazineType" :class="'cardList'+tplItemData.tabstyle"></first-layout>
      </template>
    </div>
    <template v-else>

    <div class="cardList-layout" :class="[(tplItemData.isBorderRadius == 1 || !tplItemData.isBorderRadius )?'borderRadius':'']" v-if="tplItemData.goodslist.length>0">
      <van-tabs :class="['cardList-tab','cardList-tab'+tplItemData.tabstyle]">
        <van-tab v-for="(goods,index) in tplItemData.goodslist" :key="index" :title="goods.tabtitle">
          <first-layout :tplItemData="goods.goods" :magazineType="tplItemData.magazineType" :class="'cardList'+tplItemData.tabstyle"></first-layout>
        </van-tab>
      </van-tabs>
    </div>
    </template>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tab, Tabs } from 'vant'

Vue.use(Tab)
Vue.use(Tabs)
import { scaleGoodsPrice } from '@/utils/index'
import firstLayout from './firstLayout'

export default Vue.extend({
  name: 'index',
  components: {
    firstLayout
  },
  props: {
    tplItemData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      active: 0,
      tabIndex: 0
    }
  },
  methods: {
    /**
       * 商品价格 整数放大
       */
    scaleGoodsPriceFn(price, className) {
      return scaleGoodsPrice(price, className)
    },
    showGoodsList(goods, index) {
      this.tabIndex = index
    }
  },
  created() {
    // console.log('cardList', this.tplItemData)
    this.goodsList = this.tplItemData.goodslist[0].goods
  }
})
</script>

<style lang="scss">
.cardList-layout{
  background:#fff;
  overflow: hidden;
  &.cardList-layout3 {
    background: transparent
  }
  &.borderRadius{
    border-radius:20px;
  }
}
</style>
<style lang="scss">
.cardList-tab{
  &.van-tabs--line {
    .van-tabs__wrap{
      height: 90px;
    }
  }
  &.cardList-tab3{
    display: flex;
    flex-wrap: nowrap;
    height: 80px;
    align-items: center;
    overflow: auto;
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */

    }
    .goods-nav {
      width: 180px;
      text-align: center;
      flex-shrink: 0;
      .tabtitle {
        font-size: 28px;
        color: #333;
        font-weight: 500;
        margin-bottom: 12px;
      }
      .subtitle {
        color: #999;
        font-size: 24px;
        padding: 4px 10px;
        border-radius: 20px;
        background: transparent;
      }
    }
  // .van-tabs__nav {
  //   background-color: transparent;
  // }
  // .van-tab{
  //     color: #333;
  //     font-size: 28px;
  //     font-weight: 500;
  //     .van-tab__text{
  //       // display: inline-block;
  //       line-height: 62px;
  //       padding: 0 22px;
  //       border-radius: 31px;
  //     }
  //     &.van-tab--active{
  //       // color: #fff;
  //       .van-tab__text{
  //         // background: #00C551;
  //       }
  //     }
  //   }
  //   .van-tabs__line{
  //     background:transparent;
  //   }
  }
  &.cardList-tab2{
  .van-tab{
      color: #333;
      font-size: 26px;
      .van-tab__text{
        line-height: 62px;
        padding: 0 22px;
        border-radius: 31px;
      }
      &.van-tab--active{
        color: #fff;
        .van-tab__text{
          background:rgba(242,11,34,1);
        }
      }
    }
    .van-tabs__line{
      background:transparent;
    }
  }
  &.cardList-tab1{
  .van-tabs__nav--line {
    padding-bottom: 0;
  }
  .van-tab{
      color: #666666;
      font-size: 26px;
      &.van-tab--active{
        font-size: 28px;
        color: #333;
        .van-tab__text{
           border-bottom: 4px solid rgba(242,11,34,1);
           padding: 15px 0 10px;
        }

      }
    }
    .van-tabs__line{
      display: none;
      width:68px;
      height:6px;
      background:rgba(242,11,34,1);
      border-radius: 0;
      bottom: 40px;
    }

  }
  .van-tabs__content{
    padding: 30px;
  }
}
.cardList-layout{
  .cardList2{
   .new-layout .new-small-box .new-small-item{
     width: calc((100% - 40px)/3);
     &:nth-of-type(3){
       margin-top: 0;
     }
     &:nth-of-type(2n){
       margin-right: 20px;
     }
     &:nth-of-type(3n){
       margin-right: 0;
     }
   }
  }
  .cardList3{
    margin-top: 24px;
    .goods-tips {
      .seckill {
        color: #F97D0B;
        background: rgba(249, 125, 11, 0.10);
        border-radius: 4px;
      }
    }
    .goods-pirce{
      .price-scale {
        color: #F97D0B!important;
      }
      .price-scale .num-font{
        font-size: 40px !important;
        color: #F97D0B!important;
        // font-family: DIN Alternate;
      }
      .price-scale .unit {
        color: #F97D0B!important;
        // font-family: DIN Alternate;
      }
      .ori-price {
        font-size: 24px;
        color: #999999;
        // font-family: DIN Alternate;
        // text-decoration: line-through;
      }
    }
    .addcartstyles1 {
      background: #5bd994;
      border-radius: 50%;
      i{
        display: block;
        width: 50px;
        height: 50px;
        background: url("https://img.wifenxiao.com/h5-wfx/images/diy/shop-car.png")center center no-repeat;
        background-size: 25px 24px;
      }
    }

  }
}


</style>
